<template>
    <section class="content-box">
    	<div>
            <el-col class="toolbar">
            <el-col :span="12">
                <h2>资金预算表</h2>
            </el-col>
        </el-col>
              <el-col class='toolbar'>      
              <el-col :span="24">
                 <span>年份：</span>
                <el-select v-model="BirthYear"  filterable placeholder="请选择">
                    <el-option v-for="item in year" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>
                </el-select>
                <span>显示格式：</span>
                <el-select v-model="budgeType" @change="hmBox" filterable placeholder="请选择">
                    <el-option v-for="item in  budgetaryType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button type="primary" @click="lzAtain">确定</el-button>         
            </el-col>
            </el-col> 
            <!--列表-->
            <el-table :data="tableData" border style="overflow-x:auto;"  max-height="750">
                <el-table-column fixed prop="CashFlowItemName" label="现金流量科目"  width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed prop="BudgetItemName" label="预算科目" width="300" show-overflow-tooltip>
                </el-table-column>
             <el-table-column prop="Month1" label="1月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month2" label="2月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month3" label="3月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month4" label="4月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month5" label="5月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month6" label="6月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month7" label="7月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month8" label="8月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month9" label="9月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month10" label="10月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month11" label="11月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="Month12" label="12月" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
            <el-table-column prop="MonthSum" label="累计" :formatter="dealF" width="120" align="right" header-align="center">
            </el-table-column>
        </el-table>
    	</div>
    </section>
</template>

<script>
import axios from '../../util/axios';
export default {
    name: 'zizhi',
    data() {
        return {
           	BirthYear:'',
            year:[],
          	tableData:[],
	        budgetaryType: [{
		          value: '0',
		          label: '汇总'
		        }, {
		          value: '1',
		          label: '明细'
		        }
	       	],
	       	budgeType:'0', //显示格式
        }
        },
        methods: {
	        	GetYearList(){
					axios.post('GetYearList')
					.then(res => {
	        				console.log(res)
	        				this.year = res
	        				this.BirthYear = res[res.length-1].Code
	        				this.ListJson();
	        			})
					.catch(err => {
	        				console.log(err)
	        			})
				},

        		lzAtain() { //确定按钮
        			console.log(this.BirthYear, this.budgeType)
        			this.ListJson();
        		},
        		
        		//请求列表数据
        		ListJson() {
        			axios.post('CapitalBudget', {
        				year: this.BirthYear,
        				level: this.budgeType
        			}).then(res => {
        				this.tableData = res
        				console.table(this.tableData)
        			}).catch(err => {
        				console.log(err)
        			})
        		},
        		hmBox() {
        			console.log(this.budgeType)
        		},
        		dealF(e,cell,cellValue) {
					console.log("1111111",cellValue)
					if(cellValue == 0){
						return ''
					}else{
						return cellValue
					}	   
				},

        	},
        	created() {
        		this.GetYearList();
        	},
        	mounted() {

        	},
        }
</script>
<style scoped lang="scss">
@import '../../common/css/index.css';
.toolbar {
    h2 {
        font-weight: 100;
        margin: 0 auto;
    }
};
</style>